<template>
    <div class="comment-list">
        <div class="page-title">
            评论
        </div>
        <div class="comment"
             v-for="comment in comments"
             :key="comment.id"
             @click="handleClick(comment)"
        >
            <div class="user">
                <div class="inline">
                    <img :src="comment.image" 
                         class="avatar"
                         mode='aspectFit'
                    >
                    {{ comment.title }}
                </div>
                <div class="right">
                    {{ comment.location || '未知地点' }}
                    <span class="text-primary">--</span>
                    {{ comment.phone || '未知型号' }}
                </div>
            </div>
            <div class="content page-title">
                {{ comment.comment }}
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  props: ["comments", "type"],
  components: {},
  methods: {
    // 每个评论的点击事件
    handleClick(item) {
      if (this.type === "user") {
        wx.navigateTo({
          url: '/pages/detail/main?id=' +  item.bookid
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.comment-list {
  background: #eeeeee;
  font-size: 28rpx;
  .comment {
    background: white;
    margin-bottom: 10px;
    padding: 5px 20px;
    .content {
      margin: 10px 0;
    }
    .user {
      .inline {
        display: inline-block;
        .avatar {
          width: 20px;
          height: 20px;
          background-origin: 50%;
        }
      }
      .right {
        float: right;
      }
    }
  }
}
</style>
